import React, { useRef, useState } from 'react'
import { Tabs, Swiper, SideBar, } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import './index.css';
const tabItems = [
    { key: 'dzs', title: '电子书' },
    { key: 'yss', title: '有声书' },
]
const tabs = [
    {
        key: 'all',
        title: '全部分类',
    },
    {
        key: 'rq',
        title: '人气榜',
    },
    {
        key: 'hp',
        title: '好评榜',
    },
    {
        key: 'xs',
        title: '新书榜',
    },
    {
        key: 'rs',
        title: '热搜榜',
    },
    {
        key: 'hy',
        title: '会员榜',
    },
    {
        key: 'bs',
        title: '飙升榜',
    },
]
const tabs1 = [
    {
        key: 'all',
        title: '全部分类',
    },
    {
        key: 'bf',
        title: '播放榜',
    },
    {
        key: 'hp',
        title: '好评榜',
    },
    {
        key: 'xs',
        title: '新书榜',
    },
]
const type1 = [
    {
        id: 1,
        title: "漫画杂志",
        img: "",
        type: "manh",
    },
    {
        id: 2,
        title: "外国文学",
        img: "",
        type: "wenx",
    },
    {
        id: 3,
        title: "漫画杂志",
        img: "",
        type: "manh",
    },
    {
        id: 4,
        title: "外国文学",
        img: "",
        type: "wenx",
    }
]
const type2 = [
    {
        id: 1,
        title: "都市",
        img: "",
        type: "manh",
    },
    {
        id: 2,
        title: "玄幻",
        img: "",
        type: "wenx",
    },
    {
        id: 3,
        title: "仙侠",
        img: "",
        type: "manh",
    },
    {
        id: 4,
        title: "科幻",
        img: "",
        type: "wenx",
    }
]
const bd1 = [
    {
        id: 1,
        title: "生之静物",
        img: "",
        type: "古言小说",
        jindu: "完结",
        rq: 1000,
        hp: 500
    },
    {
        id: 2,
        title: "掌控",
        img: "",
        type: "古言小说",
        jindu: "完结",
        rq: 900,
        hp: 600
    },
]
export default function Type() {
    const swiperRef = useRef(null)
    const navigate=useNavigate()
    const [activeIndex, setActiveIndex] = useState(1)
    const [type, settypes] = useState([])
    // const [type1, settypes1] = useState([])
    // const [type2, settypes2] = useState([])
    const [isShow, setIsshow] = useState(false)
    const [isShow1, setIsshow1] = useState(false)
    // const [bd1,setBd1]=useState([])
    const fenl = (e) => {
        if (e === 'all' || e === '') {
            // settype1s(type)
            setIsshow(false)
            console.log(e);
        } else {
            setIsshow(true)
            console.log(e);
        }
        console.log(type1);


    }
    const fen2 = (e) => {
        if (e === 'all' || e === '') {
            // settype1s(type)
            console.log(e);
            setIsshow1(false)
            
        } else {
            setIsshow1(true)
            console.log(e);
            // const copybd1=[...db1].sort((a,b)=>a.e-b.e)
            // setBd1(copybd1)
        }
        console.log(type1);


    }
    const tiao1=(item)=>{
        // navigate('/tingshu',{state:{type:item.type}})
    }
    const tiao2=(item)=>{
        navigate('/tingshu')
        // console.log(item);
    }

    return (
        <>
            <Tabs style={{ '--active-title-color': "#52d25d", "--active-line-color": "#52d25d", width: "50%" }}
                defaultActiveKey={tabItems[0].key}
                onChange={
                    key => {
                        const index = tabItems.findIndex(item => item.key === key)
                        setActiveIndex(index)
                        // setIsshow(false)
                        swiperRef.current?.swipeTo(index)
                    }
                }
            >
                {tabItems.map(item => (
                    <Tabs.Tab title={item.title} key={item.key} />
                ))}
            </Tabs>
            <Swiper
                allowTouchMove={false}
                indicator={() => null}
                ref={swiperRef}
            >
                <Swiper.Item>
                    <div style={{ position: "relative" }}>
                        <div style={{ display: "inline-block", verticalAlign: "top", top: 0 }}>
                            <SideBar defaultActiveKey={tabs[0].key} onChange={(e) => fenl(e)} style={{
                                '--background-color': 'white', '--height': "100vh", '--width': "100%", '--adm-color-primary': "#52d25d",
                                borderRight: "2px solid aliceblue", '--title-font-size': "20px"
                            }}>
                                {tabs.map(item => (
                                    <SideBar.Item key={item.key} title={item.title} style={{ fontSize: "15px", height: "50px" }} />
                                ))}
                            </SideBar>
                        </div>
                        {
                            isShow ?
                                <div className='bangdan'>
                                    <ul style={{ display: "flex", flexWrap: "wrap" }} className='ph'>
                                        {
                                            bd1.map((item, index) => (
                                                <li key={index} className='paihang' onClick={(item)=>tiao2(item)}>
                                                    <img src={item.img} style={{ width: "55px", height: "75px" }} />
                                                    <div className='phb'>
                                                        <p style={{ fontSize: "17px" }}>{item.title}</p>
                                                        <p style={{ color: "#999", fontSize: "14px" }}><span style={{ marginRight: "5px" }}>{item.type}</span><span>{item.jindu}</span></p>
                                                    </div>
                                                    <p style={{lineHeight: "70px", color: "orange", fontSize: "15px",width:"46%",textAlign:"right" }}>{Number(index + 1).toString().padStart(2, '0')}</p>

                                                </li>
                                            ))
                                        }
                                    </ul>
                                </div>
                                :
                                <div className='bangdan'>
                                    <h3 className='title'>题材</h3>
                                    <ul  className='tc'>
                                        {
                                            type1.map((item, id) => (
                                                <li key={id} className='ticai' onClick={(item)=>tiao1(item)}>
                                                    <p style={{ padding: "0 15px", }}>{item.title}</p>
                                                    <img src={item.img} style={{ marginTop: "10px" }} />


                                                </li>
                                            ))
                                        }
                                    </ul>
                                </div>
                        }

                    </div>
                </Swiper.Item>
                <Swiper.Item>
                    <div style={{ position: "relative" }}>
                        <div style={{ display: "inline-block", verticalAlign: "top", top: 0 }}>
                            <SideBar defaultActiveKey={tabs1[0].key} onChange={(e) => fen2(e)} style={{
                                '--background-color': 'white', '--height': "100vh", '--width': "100%", '--adm-color-primary': "#52d25d",
                                borderRight: "2px solid aliceblue", '--title-font-size': "20px"
                            }}>
                                {tabs1.map(item => (
                                    <SideBar.Item key={item.key} title={item.title} style={{ fontSize: "15px", height: "50px" }} />
                                ))}
                            </SideBar>
                        </div>
                        {
                            isShow1 ?
                                <div 
                                className='bangdan'>
                                    <ul className='ph'>
                                        {
                                            bd1.map((item, index) => (
                                                <li key={index} className='paihang'>
                                                    <img src={item.img} style={{ width: "55px", height: "75px" }} />
                                                    <div className='phb'>
                                                        <p style={{ fontSize: "17px" }}>{item.title}</p>
                                                        <p style={{ color: "#999", fontSize: "14px" }}><span style={{ marginRight: "5px" }}>{item.type}</span><span>{item.jindu}</span></p>
                                                    </div>
                                                    <p style={{lineHeight: "70px", color: "orange", fontSize: "15px",width:"46%",textAlign:"right"}}>{Number(index + 1).toString().padStart(2, '0')}</p>

                                                </li>
                                            ))
                                        }
                                    </ul>
                                </div>
                                :
                                <div className='bangdan'>
                                    <h3 className='title'>题材</h3>
                                    <ul style={{ display: "flex", flexWrap: "wrap",marginTop:"10px" }} className='tc'>
                                        {
                                            type2.map((item, id) => (
                                                <li key={id} className='ticai' onClick={(item)=>tiao1(item)}>
                                                    <p style={{ padding: "0 15px", marginRight: "20px" }}>{item.title}</p>
                                                    <img src={item.img} style={{ marginTop: "10px" }} />
                                                </li>
                                            ))
                                        }
                                    </ul>
                                </div>
                        }

                    </div>
                </Swiper.Item>
            </Swiper>
        </>
    )
}